<template>
  <div class="app-container">
    <div class="main">
      <div class="foot">
        <el-form ref="form"
                 class="foot-content"
                 :rules="rules"
                 :model="form"
                 label-width="120px">
          <div class="table-title"
               style="margin-bottom:20px">
            <span class="title-text">舱位信息</span>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="舱位名："
                            prop="product_name">
                <el-input v-model="form.product_name"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="运输号："
                            prop="trans_name">
                <el-input v-model="form.trans_name"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="运输方式："
                            prop="product_type">
                <el-select v-model="form.product_type">
                  <el-option label="海运"
                             value="sea" />
                  <el-option label="陆运"
                             value="line" />
                  <el-option label="空运"
                             value="air" />
                  <el-option label="铁路"
                             value="railway" />
                </el-select>
              </el-form-item>
            </el-col>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="截止时间："
                            prop="end_time">
                <el-date-picker v-model="form.end_time"
                                type="datetime"
                                class="datesytle"
                                placeholder="选择日期时间" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划出发时间："
                            prop="etd_time">
                <el-date-picker v-model="form.etd_time"
                                type="datetime"
                                class="datesytle"
                                placeholder="选择日期时间" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划到达时间："
                            prop="eta_time">
                <el-date-picker v-model="form.eta_time"
                                type="datetime"
                                class="datesytle"
                                placeholder="选择日期时间" />
              </el-form-item>
            </el-col>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="8">
              <el-form-item label="小拼箱："
                            prop="service_type">
                <el-switch v-model="form.service_type" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="箱子类型："
                            prop="box_type">
                <el-select v-model="form.box_type">
                  <el-option label="干货箱"
                             value="干货箱" />
                  <el-option label="干货高箱"
                             value="干货高箱" />
                  <el-option label="挂衣箱"
                             value="挂衣箱" />
                  <el-option label="开顶箱"
                             value="开顶箱" />
                  <el-option label="冷冻箱"
                             value="冷冻箱" />
                  <el-option label="冷高箱"
                             value="冷高箱" />
                  <el-option label="油罐箱"
                             value="油罐箱" />
                  <el-option label="框架箱"
                             value="框架箱" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="箱子尺寸："
                            prop="box_length">
                <el-select v-model="form.box_length">
                  <el-option label="20英尺"
                             value="20" />
                  <el-option label="35英尺"
                             value="35" />
                  <el-option label="40英尺"
                             value="40" />
                  <el-option label="45英尺"
                             value="45" />
                </el-select>
              </el-form-item>
            </el-col>

          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="出发地名："
                            prop="start_point_name">
                <el-input v-model="form.start_point_name"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出发地编码："
                            prop="start_point">
                <el-input v-model="form.start_point"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="目的地名："
                            prop="end_point_name">
                <el-input v-model="form.end_point_name"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="目的地编码："
                            prop="end_point">
                <el-input v-model="form.end_point"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="8">
              <el-form-item label="荷载(KGS)："
                            prop="box_payload">
                <el-input-number v-model="form.box_payload"
                                 :step="1000"
                                 size="small"
                                 :min="1000" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="容积(CBM)："
                            prop="box_volume">
                <el-input-number v-model="form.box_volume"
                                 :step="1"
                                 size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="价格(CNY)："
                            prop="product_price">
                <el-input-number v-model="form.product_price"
                                 :step="1"
                                 size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="支付条款："
                            prop="product_paytype">
                <el-select v-model="form.product_paytype">
                  <el-option label="预付"
                             value="预付" />
                  <el-option label="第三方支付"
                             value="第三方支付" />
                  <el-option label="到付"
                             value="到付" />
                </el-select>
              </el-form-item>
            </el-col>
          </div>

          <div style="display:flex;justify-content: space-between">
            <el-col :span="15">
              <el-form-item label="舱位要求：">
                <el-input v-model="form.product_remark"
                          type="textarea" />
              </el-form-item>
            </el-col>
          </div>
          <!-- 代运商信息 -->
          <div class="table-title"
               style="margin-bottom:20px">
            <span class="title-text">代运商信息</span>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="代运商："
                            prop="company_name">
                <el-input v-model="form.company_name"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="代运商代码："
                            prop="company_code">
                <el-input v-model="form.company_code"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="财务人：">
                <el-input v-model="form.company_finance_user"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="业务电话：">
                <el-input v-model="form.company_finance_iphone"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="传真：">
                <el-input class="inputstyle" v-model="form.company_fax"></el-input class="inputstyle">
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="企业邮箱：">
                <el-input v-model="form.company_email"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业地址：">
                <el-input v-model="form.company_address"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
          </div>
          <!-- 承运商信息    -->
          <div class="table-title"
               style="margin-bottom:20px">
            <span class="title-text">承运商信息</span>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="承运商："
                            prop="carrier_name">
                <el-input v-model="form.carrier_name"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="承运商代码："
                            prop="carrier_code">
                <el-input v-model="form.carrier_code"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="财务人：">
                <el-input v-model="form.carrier_finance_user"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="业务电话：">
                <el-input v-model="form.carrier_finance_iphone"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="传真：">
                <el-input class="inputstyle" v-model="form.carrier_fax"></el-input class="inputstyle">
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="企业邮箱：">
                <el-input v-model="form.carrier_email"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业地址：">
                <el-input v-model="form.carrier_address"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
          </div>
          <el-form-item style="display:flex;justify-content: space-between;">
            <el-button type="primary"
                       @click="updateForm('form')">保存修改</el-button>
            <el-button style="margin-left:50px"
                       @click="auditForm('form')">修改审核</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>
</template>
<script>
import productsApi from '@/api/products'

export default {
  data () {
    return {
      form: {}
    }
  },
  watch: { // 监听
    $route (to, from) { // 路由变化方式，路由发生变化，方法就会执行
      this.init()
    }
  },
  created () { // 页面渲染之前执行
    this.init()
  },
  methods: {
    init () {
      // 判断路径有id值,做修改
      if (this.$route.params && this.$route.params.id) {
        // 从路径获取id值
        const id = this.$route.params.id
        // 调用根据id查询的方法
        this.getInfo(id)
      } else { // 路径没有id值，做添加
        // 清空表单
        this.form = {}
      }
    },
    // 根据id查询
    getInfo (id) {
      productsApi.getproductInfo(id)
        .then(response => {
          this.form = response.data[0]
        })
    },
    // 修改
    updateForm () {
      this.form.update_time = this.utils.getNowTime()
      productsApi.updateproductInfo(this.form)
        .then(response => {
          this.$message({
            type: 'success',
            message: `舱位:${this.form.product_id},修改成功!`
          })
          // 回到列表页面 路由跳转
          this.$router.push({ path: '/products/index' })
        })
    },
    auditForm () {
      this.$confirm('', '确认审核', {
        confirmButtonText: '通过',
        cancelButtonText: '不通过',
        type: 'info',
        center: true
      }).then(() => {
        this.form.product_status = 1
        this.form.update_time = this.utils.getNowTime()
        productsApi.updateproductInfo(this.form)
          .then(response => {
            // 提示信息
            console.log(response)
            this.$message({
              type: 'success',
              message: `舱位${this.form.product_id},审核通过`
            })
            // 回到列表页面 路由跳转
            this.$router.push({ path: '/products/index' })
          })
      }).catch(() => {
        this.form.product_status = 0
        this.form.update_time = this.utils.getNowTime()
        productsApi.updateproductInfo(this.form)
          .then(response => {
            // 提示信息
            console.log(response)
            this.$message({
              type: 'warning',
              message: `舱位${this.form.product_id},审核不通过`
            })
            // 回到列表页面 路由跳转
            this.$router.push({ path: '/products/index' })
          })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.table-title {
  border-bottom: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 34px;
}
.title-text {
  color: #000;
  font-size: 16px;
  padding-top: 4px;
  font-weight: 700;
  border-bottom: 2px solid #07467c;
}
.inputstyle {
  width: 250px;
}
.datesytle {
  width: 250px;
}
</style>

